<template>
  <div class="Songsitem" @contextmenu.prevent="showTextMenu($event, index)">
    <div title="" class="track playlist">
        <img :src="`${item?item.al.picUrl:''}`" class="">
        <div class="title-and-artist">
              <div class="container">
                  <div class="title">{{item.name}}</div>
                    <div class="artist">
                      <span class="artist-in-line">
                        <span >
                          <a href="#/artist/30549371" class="" v-for="(i,index1) in item.ar" :key="index1">{{i.name}}{{index1 === item.ar.length-1?'':','}}</a>
                        </span>
                      </span>
                    </div>
                  </div>
                  <div >
                </div>
            </div>
            <div class="album">
              <a href="#/album/80958771" class="">{{item.name}}</a>
              <div></div>
            </div>
            <div class="actions">
              <button  @click="toggle">
                <svg-icon icon-class="heart-solid" v-if="flag"></svg-icon>
                <svg-icon icon-class="heart" v-if="!flag" class="heartBefore"></svg-icon>
              </button>
            </div>
        <div class="time">{{item.dt|formateTime}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlaymusicSongItem',
  props: ['item', 'index'],
  data() {
    return {
      flag: false,
    };
  },
  mounted() {
  },
  methods: {
    formateData(arstis) {
      const arr = arstis.map(item => item.name);
      return arr;
    },
    toggle() {
      this.flag = true;
    },
    showTextMenu(e) {
      this.$emit('contextmenu', e);
    },
  },
  filters: {
    // 时间戳
    formateTime(time) {
      // console.log(time);
      // eslint-disable-next-line radix
      const m = parseInt((time / 1000) / 60);
      // eslint-disable-next-line radix
      const s = parseInt((time / 1000) % 60) < 10 ? `0${parseInt((time / 1000) % 60)}` : parseInt((time / 1000) % 60);
      return `${m}:${s}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.track {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.track img {
    border-radius: 8px;
    height: 46px;
    width: 46px;
    margin-right: 20px;
    border: 1px solid rgba(0,0,0,.04);
    cursor: pointer;
}
.track .title-and-artist {
    flex: 1;
    display: flex;
}
.track .title-and-artist .container {
    display: flex;
    flex-direction: column;
}
.track .title-and-artist .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    cursor: default;
    padding-right: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
}
.track .title-and-artist .artist {
    margin-top: 2px;
    font-size: 13px;
    opacity: .68;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.track .title-and-artist .artist {
    margin-top: 2px;
    font-size: 13px;
    opacity: .68;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.track .album {
    flex: 1;
    display: flex;
    font-size: 16px;
    opacity: .88;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.actions {
    width: 80px;
    display: flex;
    justify-content: flex-end;
}
button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: transparent;
    border-radius: 25%;
    transition: transform .2s;
}
button .svg-icon {
    height: 16px;
    width: 16px;
    color: var(--color-primary);
}
.svg-icon {
    fill: currentColor;
}
button {
    background: none;
    border: none;
    cursor: pointer;
}
button, select {
    font-family: inherit;
}
.track .time {
    font-size: 16px;
    width: 50px;
    cursor: default;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
    font-variant-numeric: tabular-nums;
    opacity: .88;
    color: var(--color-text);
}
.heartBefore{
  visibility: hidden;
}
.track{
    &:hover{
      background-color:#f5f5f7;
      .heartBefore{
          visibility: visible;
      }
    }
}
.artist-in-line a:hover{
  text-decoration: underline;
}
</style>
